<template>
    <button class="fbz-div" @click="handleClick" @contextmenu.prevent="handleMouseDown" @dblclick="handleDbClick">
        <span v-if='marked'>!</span>
        <span v-else-if='!show'>?</span>
        <span v-else-if='!marked'>{{is}}</span>

    </button>
</template>
<script>
export default {
    props:{
        marked:{
            type:Boolean
        },
        show:{
            type:Boolean,
            default:false
        },
        in:{
            type:String,
            required:true
        }
    },
    data(){
        return{
          is:this.in
        }
    },
    methods:{
        handleDbClick(e){
            console.log('dbclicked')
            this.$emit('aroundClick')
        },
        handleMouseDown(e){
            console.log('rightClicked')
            this.$emit('mark')
        },
        handleClick(){
            console.log('clicked')
            this.$emit('showThis')
            if(this.is==='0'){
                this.$nextTick(()=>{
                    this.$emit('otherClick')
                })
            }else if(this.is==='z'){
                this.$emit('gameover')
                
            }
        }
    },
    mounted(){
        // console.log(this.position)
    }
}
</script>
<style scoped>
    .fbz-div{
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
    }
    .fbz-div:hover{
        
    }
</style>